<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="themes/base.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="/resources/util.js"></script>
    <title>我的中奖纪录</title>
    <style type="text/css">
        body{
            font-size: 13px;
            padding: 0px;
        }
        .content{
            padding-top: 85px;
            box-sizing: border-box;
        }
        .record{
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0px;
            padding: 0px 10px;
        }
        .record a{
            padding: 10px;
            background-color: #003366;
            color: #fff;
            width: 70px;
            text-align: center;
        }
        .record>span{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .record a.takeGoodsCodeGoted{
            background-color: #fff;
            font-size: 12px;
            color: #003366;
        }
        .record a.takeGoodsCodeGoted>span{
            display: none;
        }
        .record a.takeGoodsCodeGoted:after{
            content:"重取提货码";
        }
        .nodata{
            padding: 10px;
            text-align: center;
            display: none;
        }
        .menu{
            display: flex;
            background: rgba(255,255,255,0.95);
            border-bottom: #ccc solid 1px;
            position: fixed;
            width: 100%;
            align-items: center;
            color: #000;
        }
        .shop_home,.service{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 12px;
            margin: 10px;
        }
        .service{
            display: none;
        }
        .service span:first-of-type{
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,0.75);
            border-radius: 50%;
            padding: 10px;
            box-sizing: border-box;
        }
        .service span svg{
            fill:#fff;
        }
        .service_detail_outer{
            background-color: rgba(255,255,255,0.75);
            position: fixed;
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .service_detail{
            position: relative;
            display: flex;
            position: fixed;
            padding: 30px;
            background: #003366;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 1;
            color: #fff;
            font-size: 12px;
        }
        .service_detail p{
            text-align: center;
            font-size: 16px;
            background: #fff;
            padding: 5px;
            margin: 0px;
            border-radius: 5px;
            color: #000;
        }
        .service_detail a{
            position: absolute;
            width: 16px;
            height: 16px;
            top: 10px;
            right: 10px;
            color: #fff;
        }
        .service_detail a svg{
            fill:#fff;
        }
        .service_detail span{
            margin-bottom: 10px;
            line-height: 22px;
        }
        .shop_home>span:first-of-type{
            padding: 10px;
            display: block;
            background-color: rgba(0,0,0,0.75);
            border-radius: 50%;
        }
        .shop_home img{
            width: 30px;
            height: 30px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="menu">
    <div class="shop_home">
        <span><img src=""/></span>
        <span>前往商城</span>
    </div>
    <div class="service">
        <span><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><circle cx="9" cy="9" r="4" class="style-scope iron-icon"></circle><path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z" class="style-scope iron-icon"></path></g></svg></span>
        <span>兑奖客服</span>
    </div>
    </div>
    <div class="service_detail_outer">
    <div class="service_detail"></div>
    </div>
    <div class="content">
    <div class="history"></div>
    <div class="nodata">没有更多数据</div>
    </div>

    <script type="text/javascript">
        var token = null;
        //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
        var apiHost = "https://"+window.location.hostname+"/plugin/api";
        let appId = util._param("app_id");
        let app_id=appId;
        function addRecord(record){
            let title = $("<span><img src=\""+record.trade_pic+"?imageView2/5/w/50/h/50\"/>"+record.trade_title+"</span>");
            let money = $("<span>"+util._money(record.lucky_money)+"</span>");
            let time = $("<span>"+util._date(record.time)+"</span>");
            let action = record.completed?$("<span>商家已发货</span>"):$("<a><span>获取提货码</span></a>");
            if(!record.completed){
                if(record.takeGoodsCodeGoted){
                    action.addClass("takeGoodsCodeGoted");
                }
                action.click(function(){
                    let scene = JSON.stringify({action:"takeGoods",tradeId:record.trade_id,appId:appId});
                    let imgSrc = apiHost+"/wx.app.qrcode.appcenter.launch?&scene="+encodeURIComponent(scene)+"&width=300";
                    $.ajax({
                        url:apiHost+"/image.merge",
                        type:"POST",
                        contentType:"application/x-www-form-urlencoded",
                        data:{back:imgSrc,front:record.trade_pic+"?imageView2/5/w/50/h/50",x:0,y:0},
                        success:function(newImage){
                           $.ajax({
                               contentType:"application/json",
                                url:apiHost+"/wx.app.call?name=previewImage&asyn=true",
                                type:"POST",
                                data:JSON.stringify({current:newImage,urls:[newImage]})
                            });
                            window.localStorage.setItem("takeGoods.code.goted."+record.trade_id,"1");
                            action.addClass("takeGoodsCodeGoted");
                        }
                    });
                });
            }
            
            $("<div></div>").addClass("record").append(title).append(money).append(time).append(action).appendTo($(".history"));
        }
        let start = 0;
        let end = 13;
        let isLoading = false;
        function loadMore(){
            if(isLoading){
                return;
            }
            $.mobile.loading( "show" );
            $.get(apiHost+"/remote.call",{url:"https://service-p5l2zor3-1255950678.ap-shanghai.apigateway.myqcloud.com/release/my-winning-record?start="+start+"&end="+end+"&plugin_id=zhuanpan"},function(res){
                res.forEach(function(record){
                    let takeGoodsCodeGoted = window.localStorage.getItem("takeGoods.code.goted."+record.trade_id)=="1";
                    record.takeGoodsCodeGoted = takeGoodsCodeGoted;
                    addRecord(record);
                });
                if(res.length==0){
                    $(".nodata").show();
                }else{
                    start +=end+1;
                    end +=end;
                    $(".nodata").hide();
                }
                
            }).done(function(){
                 window.setTimeout(function(){
                     isLoading = false;
                 },1000);
                $.mobile.loading( "hide" );
            });
        }
        
        $(function(){
            $.ajax({
                url:apiHost + "/cache.app.get?app_id=" + app_id + "&key=plugin.zhuanpan.setting",
                type:"POST",
                dataType:"json",
                success:function(setting){
                   if(setting&&setting.service_weixin_enabled){
                        if(setting.service_weixin_name){
                            let span = $("<p/>").addClass("service_weixin_name").html(setting.service_weixin_name).click(function(){
                                var success = true;
                                var text=this;
                                if (document.body.createTextRange) {
                                    var range = document.body.createTextRange();
                                    range.moveToElementText(text);
                                    range.select();
                                } else if (window.getSelection) {
                                    var selection = window.getSelection();
                                    var range = document.createRange();
                                    range.selectNodeContents(text);
                                    selection.removeAllRanges();
                                    selection.addRange(range);
                                } else {
                                    success =false;
                                }
                                if(success){
                                    document.execCommand("Copy");
                                    alert("客服微信号已复制，请通过微信添加好友");
                                }else{
                                    alert("请手动复制微信号");
                                }
                            });
                            $(".service_detail").append(span);
                            $(".service_detail").append($("<span>点击复制客服微信号</span>"));
                        }
                        if(setting.service_weixin_qrcode){
                            let imgSrc = setting.service_weixin_qrcode;
                            let img = $("<img/>").prop("src",imgSrc+"?imageView2/2/w/250").click(function(){
                                $("#loading").css("display","flex");
                                $.ajax({
                                    url:apiHost+"/wx.app.call?name=previewImage&asyn=true",
                                    type:"POST",
                                    data:JSON.stringify({current:imgSrc,urls:[imgSrc]})
                                }).always(function(){
                                    $("#loading").css("display","none");
                                });
                            });
                            $(".service_detail").append(img);
                            $(".service_detail").append($("<span>扫码加客服为好友</span>"));
                            $(".service_detail").append($("<a><svg viewBox=\"0 0 16 16\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g><path d=\"M16 0l-1 0.010-7 6.99-7-6.99-1-0.010v1l7 7-7 7v1h1l7-7 7 7h1v-1l-7-7 7-7v-1z\"></path></g></svg></a>").click(function(){
                                $(".service_detail_outer").css("display","none");
                            }));
                        }
                        $(".service").css("display","flex").click(function(){
                            $(".service_detail_outer").css("display","flex");
                        });
                    } 
                }
            });
            $(".shop_home").click(function(e){
                wx.miniProgram.reLaunch({url:"/pages/index/index"});
            });
            
            $(window).scroll(function(){
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    loadMore();
                }
            });
        });
    </script>
</body>

</html>
